<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>榆林科技馆</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">

    


    <!--Vue and Jquery-->
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/bootstrap.bundle.js"></script>
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/signin.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/modals.css">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
  </head>
  <body class="text-center">
    
<main class="form-signin">
  <div id="loginFrom">

    <!--注册模态框-->
    <div class="modal fade" tabindex="-1" aria-hidden="true" id="registered">
      <div class="modal-dialog" role="document">
        <div class="modal-content rounded-5 shadow">
          <div class="modal-header p-5 pb-4 border-bottom-0">
            <!-- <h5 class="modal-title">Modal title</h5> -->
            <h2 class="fw-bold mb-0">注册</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body p-5 pt-0">
            <form class="">
              <div class="form-floating mb-3">
                <input type="text" class="form-control rounded-4"v-model="registeredUser.reUsername" @blur="checkUsername()" id="registeredName" placeholder="username">
                <label for="floatingInput">用户名</label>
              </div>

              <div class="form-floating mb-3">
                <input type="password" class="form-control rounded-4"v-model="registeredUser.rePassword" id="registeredPass" placeholder="Password">
                <label for="floatingPassword">密码</label>
              </div>
              <button class="w-100 mb-2 btn btn-lg rounded-4 btn-primary" type="submit">注册</button>
              <small class="text-muted">用户名和密码格式为8-16英文大小写或者数字</small>
              <hr class="my-4">
              <span  style="color: red;text-align: center">{{msg}}</span>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--End Modal-->
    <form>
      <img class="mb-4" src="/static/img/logo.png" alt="" width="72" height="57">
      <h1 class="h3 mb-3 fw-normal">请登录</h1>

      <div class="form-floating">
        <input type="text" class="form-control" id="floatingInput" v-model="loginUser.username" placeholder="username">
        <label for="floatingInput">用户名</label>
        </div>
        <div class="form-floating">
          <input type="password" class="form-control" id="floatingPassword" v-model="loginUser.password" placeholder="Password">
          <label for="floatingPassword">密码</label>
        </div>

        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> 记住我
          </label>
        </div>
      <div>
        <button class="w-100 btn btn-lg btn-primary" v-on:click="login()" type="button">登入</button>
      </div>
      <div style="margin-top: 30px">
        <button class="w-100 btn btn-lg btn-primary" v-on:click="registered()" type="button">注册</button>
      </div>
        <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
      </form>
  </div>
</main>
    <script>
      var loginF = new Vue({
        el:'#loginFrom',
        data:{
          loginUser:{
            username:'',
            password:''
          },
          registeredUser:{
            reUsername:'',
            rePassword:''
          },
          msg:''
        },
        methods:{
          /*用户登录*/
          login:function (){
              $.ajax({
                url:'/user/login',
                type:'post',
                data:loginF.loginUser,
                dataType:'json',
                success:function (res){
                  if (res.code == 233){
                    alert("用户名或密码错误,请重新输入!")
                    loginF.loginUser.password='';
                  }else{
                    window.location.href='/url/index';
                  }
                }
              });
          },
          /*检查用户名是否重复*/
          checkUsername:function (){
            $.ajax({
              url:'/user/checkUsername',
              type: 'post',
              data:{'username':loginF.registeredUser.reUsername},
              dataType: 'json',
              success:function (res){
                if (res.code === 233){
                  loginF.msg='用户名重复,请重新输入!';
                 loginF.registeredUser.reUsername='';
                }
              }
            });
          },
          registered:function (){
            $("#registered").modal("show");
          }
        }
      });
    </script>
  </body>

</html>
